<template>
  <me-table :data="state.list" :total="state.total" :height="300" @current-change="currentChange" :handle="{
    delete: del,
    edit: edit
  }" :headHandle="{
  add: {
    label: '添加分类',
    callback: open
  }
}" :customHandle="{
  add: {
    label: '添加下级',
    callback: addChildren
  }
}">
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="icon" label="图标" width="300">
      <template #default="{ row }">
        <div>
          <el-image class="img" :src="row.icon"></el-image>
        </div>
      </template>
    </el-table-column>
  </me-table>
  <me-dialog title="添加分类" v-model="dialogVisible" @confirm="submit(ruleFormRef)">
    <el-form ref="ruleFormRef" :model="formData" :rules="rules">
      <el-form-item v-if="parentName" label="上级分类">
        <span>{{ parentName }}</span>
      </el-form-item>
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="分类图标" prop="icon">
        <Upload v-model="formData.icon"></Upload>
      </el-form-item>
    </el-form>
  </me-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, Ref } from 'vue';
import { getCategories, delCategory, addCategory, editCategory } from '@/axios/api/goods'
import { Page } from '@/custom-types'
import Upload from '@/components/Upload/Upload.vue'
import type { FormInstance, FormRules } from 'element-plus'

const state = reactive<Page>({
  list: [],
  total: 0,
  index: 1,
  size: 20
})
console.log(state.total)

const getList = () => {
  getCategories().then((res: any) => {
    state.list = res
  })
}

onMounted(() => {
  getList()
})

const currentChange = (index: number) => {
  console.log('当前页:', index)
}

const del = (id: string) => {
  delCategory(id).then(() => {
    getList()
  })
}

const initForm = () => {
  return {
    id: '',
    parentId: '',
    name: '',
    icon: ''
  }
}
const formData = reactive(initForm())
const ruleFormRef = ref<FormInstance>()
console.log(formData)

const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入分类名称！', trigger: 'blur' }],
  icon: [{ required: true, message: '请上传分类图标！', trigger: 'blur' }],
})
const dialogVisible: Ref<boolean> = ref(false)
const open = () => {
  dialogVisible.value = true
  resetForm()
}

const resetForm = () => {
  Object.assign(formData, initForm());
  // formEl.resetFields()
  // console.log(ruleFormRef)
  parentName.value = ''
}

const parentName = ref('')
const addChildren = (row: any) => {
  open()
  console.log(row)
  parentName.value = row.name
  formData.parentId = row._id
}

const submit = async (formEl: FormInstance | undefined) => {
  console.log(formData)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (formData.id) {
        editCategory(formData).then(() => {
          // state.list.unshift(res)
          dialogVisible.value = false
          getList()
        })
      } else {
        addCategory(formData).then((res: any) => {
          console.log(res)
          // state.list.unshift(res)
          dialogVisible.value = false
          getList()
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const edit = (row: any) => {
  // 先打开再赋值才能在页面更新
  open()
  const { _id, name, icon } = row
  formData.name = name
  formData.icon = icon
  formData.id = _id
}
</script>

<style scoped>
</style>